<template>
  <el-select v-model="value" :placeholder="placeholder" @change="onChange">
    <el-option v-for="(item,key,index) in datas" :key="index" :label="item.label" :value="item.value"/>
  </el-select>
</template>
<script>
import request from '@/utils/request'
export default {
  props: {
    url: {
      type: String,
      default: ''
    },
    inputKey: {
      type: String,
      default: ''
    },
    displayKey: {
      type: String,
      default: ''
    },
    requeMethod: {
      type: String,
      default: 'GET'
    },
    requeParams: {
      type: Object,
      default() {
        return {}
      }
    },
    value: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      datas: []

    }
  },
  mounted() {
    if (this.requeMethod === 'GET') {
      request.fetchGet(this.url, this.requeParams).then(this.onRequst)
    } else {
      request.fetchPost(this.url, this.requeParams).then(this.onRequst)
    }
  },

  methods: {
    onChange(value) {
      // this.$emit('update:value', value)
    },
    onRequst(res) {
      res.forEach(v => {
        this.datas.push({
          label: v[this.displayKey],
          value: v[this.inputKey]
        })
      })
    }
  }
}
</script>

<style scoped>

</style>
